<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <left-tree
          :treelist="treeList"
          :search_data.sync="boxNum"
          @refesh_list="getBoxNoOrderCacheList"
          @addBox="getBoxNoCache"
          ref="leftTree"
          @removeCategory="delBoxNoCache"
        ></left-tree>
      </el-col>
      <el-col :span="20">
        <el-card shadow="never" class="card" style="overflow: auto">
          <el-row :gutter="20" style="margin-top: 22px">
            <el-col :span="4">
              <h3 style="line-height: 32px; text-align: left">
                箱单号：{{ boxNum }}
              </h3>
            </el-col>
            <el-col :span="13">
              <el-input
                placeholder="请输入单号"
                ref="order"
                v-model="input"
                clearable
                @keyup.enter.native="scan"
              ></el-input>
            </el-col>
            <el-col :span="3">
              <el-button
                icon="el-icon-camera"
                size="small"
                type="primary"
                style="width: 100%"
                round
                @click="scan"
                >扫描
              </el-button>
            </el-col>
            <el-col :span="3">
              <el-button
                icon="el-icon-download"
                size="small"
                type="primary"
                style="width: 100%"
                round
                @click="downLoad"
                >下载箱单
              </el-button>
            </el-col>
          </el-row>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 21px"
            :header-cell-style="{
              background: '#f5f7fa',
              color: '#14142B',
              height: '28px',
              padding: '5px 0',
            }"
            :cell-style="{
              color: '#606266',
              fontSize: '13px',
              padding: '7px 0',
            }"
            border
          >
            <template slot="empty">
              <img
                class="empty-img"
                src="@/assets/imgs/zanwushuju.svg"
                style="width: 64px; height: 50px"
                alt=""
              />
              <div class="noCart">暂无数据</div>
            </template>
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="100px"
            ></el-table-column>
            <el-table-column
              prop="orderDeliver.invoice_No"
              label="运单号"
              align="center"
            ></el-table-column>
            <el-table-column prop="channelTitle" align="center" label="渠道">
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <div id="barcode"></div>
  </div>
</template>
<script>
import LeftTree from "@/components/libs/LeftTree.vue";
import {
  delBoxNoCache,
  delBoxNoOrderCache,
  getBoxNoCache,
  getBoxNoCacheList,
  getBoxNoOrderCacheList,
  printBox,
  scanCode,
} from "@/api/Box";

export default {
  name: "notShipped",
  components: { LeftTree },
  data() {
    return {
      input: "",
      isShow: false,
      form: {},
      tableData: [],
      treeList: [],
      active: "",
      boxNum: "",
    };
  },
  mounted() {
    this.getBoxNoCacheList();
  },
  methods: {
    scan() {
      if (!this.boxNum) return this.$message.warning("请先选择箱单");
      if (this.input) {
        this.scanCode({ boxNum: this.boxNum, scanNo: this.input });
        this.input = "";
      } else {
        this.$message.warning("请输入单号");
      }
      this.$refs.order.focus();
    },
    handleDelete(index) {
      this.$confirm("确定操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await delBoxNoOrderCache({
          boxNum: this.boxNum,
          odNum: index,
        });
        if (res.data.status === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
          this.getBoxNoOrderCacheList();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    //删除箱单
    async delBoxNoCache(val) {
      const res = await delBoxNoCache({ boxNum: val });
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.boxNum = "";
        this.getBoxNoCacheList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    //获取箱单列表
    async getBoxNoCacheList() {
      const res = await getBoxNoCacheList();
      if (res.data.status === 200) {
        this.treeList = res.data.data;
        this.getBoxNoOrderCacheList();
      }
    },
    //创建未发出箱单号
    async getBoxNoCache() {
      const res = await getBoxNoCache();
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.getBoxNoCacheList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    //刷新运单列表
    async getBoxNoOrderCacheList() {
      if (this.boxNum) {
        const res = await getBoxNoOrderCacheList({ boxNum: this.boxNum });
        if (res.data.status === 200) {
          this.tableData = res.data.data;
        }
      }
    },
    //下载箱单
    downLoad() {
      if (!this.boxNum) return this.$message.warning("请先选择箱单");
      printBox({ boxnum: this.boxNum }).then((res) => {
        if (res.data.status === 200) {
          window.open(res.data.data);
        }
      });
    },
    //扫描箱单
    async scanCode(obj) {
      const res = await scanCode(obj);
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.getBoxNoOrderCacheList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

.el-card {
  min-height: 800px;
}

.tabLeft > .el-tabs__nav-wrap::after {
  height: 0;
}

/*tabs 去掉el-tab-pane切换时的蓝色下划线*/
.tabLeft > .el-tabs__active-bar {
  background-color: transparent !important;
}
</style>
